let app = document.querySelector('#app')


app.addEventListener('click', function(e) {
    createRipple(this, e.x, e.y)
    setTimeout(() => {
        createRipple(this, e.x, e.y)
    }, 250);
    setTimeout(() => {
        createRipple(this, e.x, e.y)
    }, 500);
})

// 创建波纹 left:鼠标距离页面左边的距离 top:鼠标距离页面上边的距离  delay:定时器延时  opacity：扩散递减的透明度  styleOpt 波纹的样式
function createRipple(el, left, top, styleOpt, delay = 50, opacity = 0.05, ) {
    let style = {
            width: '10px',
            height: '10px',
            borderRadius: '50%',
            opacity: 1,
            border: '1px solid skyblue',
            ...styleOpt,
            position: 'fixed',
            pointerEvents: 'none'

        }
        // 创建波纹盒子 让盒子居中在鼠标中心
    style.left = (left - parseInt(style.width) / 2) + 'px'
    style.top = (top - parseInt(style.height) / 2) + 'px'


    let box = document.createElement('div')

    for (const key in style) {
        box.style[key] = style[key]
    }

    el.appendChild(box)

    // 波纹扩散效果

    let timer = setInterval(() => {
        box.style.opacity = box.style.opacity - opacity;
        box.style.width = parseInt(box.style.width) + parseInt(style.width) + 'px'
        box.style.height = parseInt(box.style.height) + parseInt(style.height) + 'px'
        box.style.left = parseInt(box.style.left) - (parseInt(style.width) / 2) + 'px'
        box.style.top = parseInt(box.style.top) - (parseInt(style.height) / 2) + 'px'

        if (box.style.opacity <= 0) {
            clearInterval(timer)
            box.parentNode.removeChild(box)
        }
    }, delay)
}